<template>
    <div>
      <!-- 搜索结果页-头部导航 -->
      <div class="search-result-container">
        <!-- 点击实现后退效果 -->
        <van-nav-bar
          title="搜索结果"
          left-arrow
          @click-left="$router.go(-1)"
          fixed
        />
      </div>
        <van-list
        v-model='loading'
        :finished='done'
        @load="pullUpLoadMoreFn"
        finished-text='没数据了'
        :immediate-check='false'
        offset="50"

        >
      <!-- 列表组件 -->

      <article-list :list='resultList'   :showCross='false'/>
         </van-list>
    </div>
</template>

<script>
import { getSearchResuListAPI } from '@/api/search'
export default {
  name: 'SearchResult',
  data () {
    return {
      resultList: [], // 文章数据
      loading: false, // 加载状态
      done: false // 全部加载完成状态

    }
  },
  // 结果列表
  // 换购子
  activated () {
    this.page = 1
    // 清空缓存数据  要不就合并了
    this.resultList = []
    this.loading = false
    this.done = false
    this.getSearchResultList()
  },
  methods: {
    // 封装搜索页列表
    async   getSearchResultList () {
      const res = await getSearchResuListAPI({
        keyword: this.$route.params.keywords,
        page: this.page++
      })
      const { results } = res.data
      if (!results.length) {
        this.done = true
        return
      }

      this.resultList = [
        ...this.resultList,
        ...results]
      this.loading = false
    },
    // 触底加载更多 上拉
    pullUpLoadMoreFn () {
      this.getSearchResultList()
    }
  }

}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
